// ===== 主SCSS入口文件 =====

// 全局样式增强
html {
  // 确保基础字体大小
  font-size: 22px;

  // 优化文字渲染
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  // 基础样式
  font-size: 1rem;
  line-height: 1.6;
  color: #323233;
  background-color: #f7f8fa;

  // 移动端优化
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

// 通用组件样式
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;

  @media (min-width: 768px) {
    max-width: 750px;
  }

  @media (min-width: 1024px) {
    max-width: 970px;
  }

  @media (min-width: 1200px) {
    max-width: 1170px;
  }

  @media (min-width: 1440px) {
    max-width: 1370px;
  }
}

// 常用布局类
.page-container {
  min-height: 100vh;
  @include flex(column, flex-start, stretch);
}

.content-wrapper {
  flex: 1;
  padding: 1.5rem;
}

.section {
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
  }
}

// 移动端1px边框解决方案的全局应用
.hairline {
  &--top {
    @include hairline(top);
  }

  &--bottom {
    @include hairline(bottom);
  }

  &--left {
    @include hairline(left);
  }

  &--right {
    @include hairline(right);
  }

  &--all {
    @include hairline(all);
  }
}

// 安全区域适配
.safe-area {
  &--top {
    @include safe-area(padding, top);
  }

  &--bottom {
    @include safe-area(padding, bottom);
  }

  &--all {
    @include safe-area(padding, all);
  }
}
